<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <nav>
    <a href="#/">Home</a> |
    <a href="#/about">About</a> |
    <a href="#/contact">Contact</a>
  </nav>

  <div id="content"></div>
</body>
<script>
  const routes = {
    '/': function() {
      document.getElementById('content').textContent = 'Home Page';
    },
    '/about': function() {
      document.getElementById('content').textContent = 'About Page';
    },
    'contract': function() {
      document.getElementById('content').textContent = 'Contract Page';
    }
  }

  function initRouter() {
    let hash = window.location.hash.substr(1);
    if (routes[hash]) {
      routes[hash]();
    } else {
      routes['/']();
    }
  }

  // 绑定
  window.addEventListener('hashchange', function() {
    initRouter();
  })

  window.onload = initRouter;
</script>
    
</html>